<template>
	<view class="container" v-if="data">
		<app-header title="首页" :warningCount="data.warning_count">
			<i class="iconfont icon-lingdang icon"></i>
		</app-header>
		<view class="livestock-info">
			<view class="title-info">
				牲畜报道
			</view>
			<view class="time-info">
				<uv-icon name="clock" color="#333" size="15px"></uv-icon>
				<text>00:00~15:30</text>
			</view>
			<view class="stats-container">
				<view class="stat-item">
					<view class="stat-number">{{ data.allCattle_count }}</view>
					<view class="stat-label">应到</view>
				</view>
				<view class="stat-item">
					<view class="stat-number" style="color: #00C657;">{{ data.present_cattle_count }}</view>
					<view class="stat-label">已到</view>
				</view>
				<view class="stat-item">
					<view class="stat-number" style="color: #FF9900;">
						{{ data.allCattle_count - data.present_cattle_count }}
					</view>
					<view class="stat-label">未到</view>
				</view>
			</view>
		</view>

		<!-- 异常设备卡片 -->
		<view class="card abnormal-device">
			<view class="device-list">
				<!-- 将 navigator 移到循环内部，每个设备项一个导航 -->
				<navigator v-for="(device, index) in abnormalDevices" :key="index" :url="`/${device.path}`"
					class="navigator-item">
					<view class="device-item">
						<image class="device-icon" :src="device.img" mode="aspectFit"></image>
						<text class="device-name">{{ device.name }}</text>
						<text class="device-status text-warning"
							v-if="index === 0">{{ data.eartag_count + data.offline_count }}</text>
						<text class="device-status text-warning" v-if="index === 1">{{ data.video_count }}</text>
					</view>
				</navigator>
			</view>
		</view>

		<!-- 养殖棚环境监控 -->
		<view class="farm-shed-monitoring" v-if="data&&breedingdata">
			<view class="monitoring-title">
				养殖棚环境监控
			</view>
			<view class="farm-shed-list">
				<view class="farm-shed-item" v-for="(item, index) in breedingdata" :key="index">
					<text class="farm-shed-name" @click="handleFarmShedClick(item)">
						{{ item.F_Title }}
					</text>
				</view>
			</view>
			<view class="parameter-list" v-if="informationdata && informationdata.length > 0">
				<view class="parameter-list-container">
					<view class="parameter-item">
						<view class="parameter-name">温度</view>
						<view class="parameter-value-container">
							<text class="parameter-value">{{informationdata[0].F_Temp}}</text>
							<text class="parameter-unit">°C</text>
							<image class="parameter-icon" src="@/static/map/seat.png" mode="aspectFit"></image>
						</view>
						<text class="parameter-timestamp">{{formatTime(informationdata[0].F_PustTime )}}</text>
					</view>
					<view class="parameter-item">
						<view class="parameter-name">湿度</view>
						<view class="parameter-value-container">
							<text class="parameter-value">{{informationdata[0].F_Humidity}}</text>
							<text class="parameter-unit">%RH</text>
							<image class="parameter-icon" src="@/static/map/seat.png" mode="aspectFit"></image>
						</view>
						<text class="parameter-timestamp">{{formatTime(informationdata[0].F_PustTime) }}</text>
					</view>
					<view class="parameter-item">
						<view class="parameter-name">硫化氢</view>
						<view class="parameter-value-container">
							<text class="parameter-value">{{informationdata[0].F_Pm}}</text>
							<text class="parameter-unit">ppm</text>
							<image class="parameter-icon" src="@/static/map/seat.png" mode="aspectFit"></image>
						</view>
						<text class="parameter-timestamp">{{formatTime(informationdata[0].F_PustTime) }}</text>
					</view>
					<view class="parameter-item">
						<view class="parameter-name">甲烷</view>
						<view class="parameter-value-container">
							<text class="parameter-value">{{informationdata[0].F_Ch}}</text>
							<text class="parameter-unit">%LEL</text>
							<image class="parameter-icon" src="@/static/map/seat.png" mode="aspectFit"></image>
						</view>
						<text class="parameter-timestamp">{{formatTime(informationdata[0].F_PustTime) }}</text>
					</view>
					<view class="parameter-item">
						<view class="parameter-name">氨气</view>
						<view class="parameter-value-container">
							<text class="parameter-value">{{informationdata[0].F_Ammonia}}</text>
							<text class="parameter-unit">ppm</text>
							<image class="parameter-icon" src="@/static/map/seat.png" mode="aspectFit"></image>
						</view>
						<text class="parameter-timestamp">{{formatTime(informationdata[0].F_PustTime) }}</text>
					</view>
					<view class="parameter-item">
						<view class="parameter-name">二氧化碳</view>
						<view class="parameter-value-container">
							<text class="parameter-value">{{informationdata[0].F_Carbon}}</text>
							<text class="parameter-unit">ppm</text>
							<image class="parameter-icon" src="@/static/map/seat.png" mode="aspectFit"></image>
						</view>
						<text class="parameter-timestamp">{{formatTime(informationdata[0].F_PustTime) }}</text>
					</view>
					<view class="parameter-item">
						<view class="parameter-name">光照</view>
						<view class="parameter-value-container">
							<text class="parameter-value">{{informationdata[0].F_Illumination}}</text>
							<text class="parameter-unit">lux</text>
							<image class="parameter-icon" src="@/static/map/seat.png" mode="aspectFit"></image>
						</view>
						<text class="parameter-timestamp">{{formatTime(informationdata[0].F_PustTime) }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import AppHeader from '@/pages/components/AppHeader.vue';
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getHomeData,
		house,
		setting,
		login
	} from '@/utils/api/Home.js'
	import dayjs from 'dayjs'
	const Formdata = ref({
		username: 'admin',
		password: '0000'
	})
	const Id = ref(null)
	const data = ref(null)
	const breedingdata = ref(null)
	const informationdata = ref(null)
	const abnormalDevices = ref([{
			img: '/static/imgs/shexiang.png',
			name: '异常设备',
			path: 'pages/home/Andetails'
		},
		{
			img: '/static/imgs/shexiang.png',
			name: '监控视频',
			path: 'pages/home/Monitor'
		}
	]);

	//获取首页信息
	const list = async () => {
		let res = await getHomeData()
		data.value = res.data;
	};
	//获取养殖棚列表
	const breedinglist = async () => {
		let res = await house();
		breedingdata.value = res.data;
		// 提取所有 F_Id 到新数组
		const allFIds = breedingdata.value.map(item => item.F_Id);
	};

	// 点击养殖棚列表的处理函数
	const handleFarmShedClick = async (item) => {
		const fId = item.F_Id;
		if (typeof fId !== 'string') {
			fId = String(fId);
		}
		// 直接调用已经定义的informationlist函数
		await informationlist(fId);
	};

	// 获取养殖棚信息（移到外部，避免重复定义）
	const informationlist = async (fId) => {
		let res = await setting({
			F_HouseId: fId
		});
		if (res.code == 200) {
			informationdata.value = res.data
		}
	};

	onMounted(async () => {
		try {
			// 等待首页数据和养殖棚列表加载完成
			await list();
			await breedinglist();
			// 检查是否有养殖棚数据
			if (breedingdata.value && breedingdata.value.length > 0) {
				// 获取第一个大棚的ID
				const firstHouseId = breedingdata.value[0].F_Id;
				// 加载第一个大棚的环境参数
				await informationlist(firstHouseId);
			}
		} catch (error) {
			console.error('数据加载出错:', error);
		}
	});

	onMounted(async () => {
		let res = await login(Formdata.value)
		if (res.code == 200) {
			Id.value = res.data.id
			uni.setStorage({
				key: 'UserId',
				data: Id.value,
				success: function() {
					console.log('存储成功');
				},
				fail: function(err) {
					console.log('存储失败', err);
				}
			});
		}
	})
	
	//日期转换函数
	const formatTime = (time) => {
	    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
	}
</script>

<style scoped lang="scss">
	@import '@/static/iconfont/iconfont.css';
	/* 颜色变量 */
	$color-primary: #00C657;
	$color-warning: #FF9900;
	$color-danger: #FF3B30;
	$color-text-primary: #333;
	$color-text-secondary: #666;
	$color-text-tertiary: #999;
	$color-bg-primary: #FFFFFF;
	$color-bg-secondary: #F5F7FA;
	$color-border: #E5E5E5;

	/* 尺寸变量 */
	$card-radius: 16rpx;
	$card-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	$spacing-sm: 10rpx;
	$spacing-md: 20rpx;
	$spacing-lg: 30rpx;

	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #F5F7FA;
	}

	.livestock-info {
		width: 85%;
		height: 360rpx;
		margin: 30rpx auto;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		border: 1rpx solid #E5E5E5;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;
		z-index: 10;
		margin-top: -230rpx;
	}

	.title-info {
		font-size: 32rpx;
		font-weight: 600;
		color: #00C657;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.time-info {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #666;
		margin-bottom: $spacing-lg;

		.uv-icon {
			margin-right: 10rpx;
		}
	}

	.stats-container {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-number {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
	}

	/* 异常设备卡片 */
	.abnormal-device {
		padding: 0;
	}

	.card-header {
		padding: $spacing-lg;
		border-bottom: 1rpx solid $color-border;
		font-size: 28rpx;
		font-weight: 500;
		color: $color-text-primary;
	}

	.device-list {
		padding: $spacing-md 0;
		border: 1rpx solid $card-shadow;

	}

	.device-item {
		width: 85%;
		height: 110rpx;
		margin: auto;
		display: flex;
		align-items: center;
		padding: $spacing-md $spacing-lg;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
		border-radius: 15rpx;
		margin-top: $spacing-lg;

		&:last-child {
			border-bottom: none;
		}
	}

	.device-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: $spacing-md;
	}

	.device-name {
		flex: 1;
		font-size: 28rpx;
		/* 增大设备名称字体大小 */
		line-height: 32rpx;
		/* 调整行间距 */
		color: $color-text-primary;
	}

	.device-status {
		font-size: 24rpx;
		color: $color-warning;
		/* 明确状态文字颜色 */
	}

	/* 养殖棚环境监控 */
	.farm-shed-monitoring {
		width: 90%;
		margin: 30rpx auto;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		border: 1rpx solid #E5E5E5;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		/* 设置为垂直方向布局 */
	}

	.monitoring-title {
		font-size: 28rpx;
		font-weight: 500;
		color: $color-text-primary;
		margin-bottom: 20rpx;
	}

	.farm-shed-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.farm-shed-name {
		height: 40rpx;
		display: flex;
	}

	.farm-shed-item {
		margin-right: 30rpx;
		font-size: 24rpx;
		color: $color-text-secondary;
	}

	.parameter-list {
		display: flex;
		justify-content: space-around;
		flex: 1;
		/* 让这部分容器占据剩余空间 */
	}

	.parameter-list-container {
		display: flex;
		flex-wrap: wrap;
		/* 允许子元素换行 */
		flex: 1;
		/* 设置flex: 1，使其能根据父容器高度自适应 */
	}

	.parameter-item {
		width: 44%;
		margin-left: 10rpx;
		margin-bottom: 10rpx;
		padding: 15rpx;
		border-radius: 10rpx;
		background-color: #E7F6F0;
	}

	.parameter-name {
		font-size: 24rpx;
		color: $color-text-primary;
		margin-bottom: 5rpx;
	}

	.parameter-value-container {
		display: flex;
		align-items: center;
	}

	.parameter-value {
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 5rpx;
	}

	.parameter-unit {
		font-size: 20rpx;
		color: $color-text-secondary;
	}

	.parameter-icon {
		width: 60rpx;
		height: 60rpx;
		margin-left: auto;
	}

	.parameter-timestamp {
		font-size: 20rpx;
		color: $color-text-tertiary;
	}
	
	.icon{
		font-size: 40rpx;
	}
</style>